import React, { useState, useRef, useEffect, useImperativeHandle } from 'react';
import { Modal, InputNumber, Button, Row, Col, Space, Radio } from 'antd';
import { useUpdateEffect } from 'ahooks';
import { v4 as uuidv4 } from 'uuid';
import './index.less'
const XComponents = (props) => {
    const { xList = [], val, children, gd = false } = props
    if (xList.includes(val)) {
        return <div className='SeatMapModal_seat_x'>
            {children}
            {gd && <div className='SeatMapModal_seat_xConponents'></div>}
        </div>
    }
    return children
}
const SeatEditor = (props) => {
    const { seatConfig } = props
    const [data, setData] = useState({})
    const { list, xList, yList, } = data
    useEffect(() => {
        setData(seatConfig)
    }, [seatConfig])

    const ColLiner = new Set(list.map(val => {
        return val.y
    }))
    const RenderItemList = (props) => {
        const { data, allData } = props
        return <div className='SeatMapModal_seat_list'>
            {list.filter(val => {
                return val.y === data
            }).map((val, index) => {
                const { status, x, id } = val
                return <div
                    key={index}
                    onClick={() => {
                        setData({
                            ...allData,
                            list: list.map((s,) => {
                                if (val.id === s.id) {
                                    return {
                                        ...s,
                                        status: s.status === 'available' ? 'none' : 'available'
                                    }
                                }
                                return s

                            })
                        })
                    }}
                    style={yList.includes(x) ? { marginRight: 24 } : {}}
                    className={`SeatMapModal_seat_listItem ${status === 'available' ? 'SeatMapModal_seat_listNoCheck' : ''}`}
                >
                </div>
            })}
        </div>
    }
    return (
        <Row gutter={[24, 24]}>
            <Col span={24}>
                <div className='SeatMapModal_box'>
                    <Space className='SeatMapModal_seat_listItem'>
                        <div>
                            <div className='SeatMapModal_seat_listItem SeatMapModal_seat_listNoCheck'></div>
                        </div>
                        <div>

                            <div className='SeatMapModal_seat_listItem SeatMapModal_seat_listCheck'></div>
                        </div>

                    </Space>
                    <div className='SeatMapModal_desc_box'>
                        共计{list.filter(val => {
                            return val.status !== 'none'
                        }).length}个座位
                    </div>
                    <div className='SeatMapModal_seat_setting'>
                        座位设置：
                        <div>
                            <div className='SeatMapModal_seat_list'>
                                <div className='SeatMapModal_seat_liner'>
                                    {ColLiner.map((item, index) => {
                                        return <XComponents val={index} xList={xList} yList={yList}>
                                            <div key={index} className='SeatMapModal_seat_count'>
                                                {item}
                                            </div>
                                        </XComponents>

                                    })}

                                </div>
                                <div style={{ position: 'relative' }}>
                                    {[...yList].sort().filter(val => {
                                        return val
                                    }).map((val, index) => {
                                        if (!val) {
                                            return null
                                        }
                                        return <div style={{ left: val * '26' + index * 18 + 'px' }} className='SeatMapModal_seat_yComponents' key={index}></div>
                                    })}
                                    {ColLiner.map((val, index) => {
                                        return <XComponents gd={true} val={index} xList={xList} yList={yList}>

                                            <RenderItemList allData={data} data={val}></RenderItemList>
                                        </XComponents>
                                    })}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </Col>
        </Row>

    );
};

export default SeatEditor;